<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        #box {
            width: 800px;
            height: 40px;
            border: 1px solid #333;
            margin: 30px auto;
        }
        
        table {
            width: 800px;
            text-align: center;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <table border="1" cellspacing="0">
        <thead>
            <td>编号</td>
            <td>学号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>成绩</td>
        </thead>
        <tbody></tbody>
    </table>
    <script src="./js/page.js"></script>
    <script>
        let box = document.getElementById("box");
        let tBody = document.querySelector("tbody");
        let first_ = "俞任袁柳酆鲍史唐费廉岑薛";
        let second_ = "一二三四五六七八九十";
        var thrid_ = "一二三四五六七八九十";
        let fn_ = (a, b) => Math.floor(Math.random() * (b - a) + a);
        let sex_ = "男女";
        let arr = [];
        for (let i = 0; i < 800; i++) {
            arr.push({
                stuId: i + 1,
                stuName: first_[fn_(0, 12)] + second_[fn_(0, 10)] + thrid_[fn_(0, 10)],
                stuAge: fn_(18, 22),
                stuSex: sex_[fn_(0, 2)],
                score: fn_(60, 100)
            })
        }
        let p = new Pagination(box, {
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    total: arr.length,
                    totalPage: Math.ceil(arr.length / 10)
                },
                textInfo: {
                    first: "首页",
                    prev: "上一页",
                    next: "下一页",
                    last: "尾页"
                },
                change(curNum) {

                    let data_ = arr.slice((curNum - 1) * 10, curNum * 10);
                    console.log(data_);
                    let str = "";
                    data_.forEach(function(item, index) {
                        str += `
                        <tr>
                            <td>${index+1}</td>
                            <td>${item.stuId}</td>
                            <td>${item.stuName}</td>
                            <td>${item.stuAge}</td>
                            <td>${item.stuSex}</td>
                            <td>${item.score}</td>
                        </tr>
                   `
                    })
                    tBody.innerHTML = str;
                }

            })
            // console.log(arr);
            // let div = document.getElementById("box");
            //let p = new Pagination(div);

        // let p = new Pagination(div, {
        //     pageInfo: {
        //         pageNum: 1,
        //         pageSize: 10,
        //         total: 800,
        //         totalPage: Math.ceil(800 / 10)
        //     },
        //     textInfo: {
        //         first: "首页",
        //         prev: "上一页",
        //         next: "下一页",
        //         last: "尾页"
        //     }
        // })
    </script>
</body>

</html>